<template>
  <div class="custom-container p-5">
      <a-tabs type="card">
        <a-tab-pane key="1" :tab="t('routes.demo.inet.log')">

          <a-table class="ant-table-striped table1"
                 :columns="columns"
                 :data-source="dataList"
                 size="middle"
                 :rowKey="(record, index) => { return index }"
                 :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
                 :pagination="paginationOption">
          <template #action="{ record }">
            <a-button type="link">修改主体</a-button>
          </template>
        </a-table>
      </a-tab-pane>
      </a-tabs>

  </div>
</template>
<script lang="ts">
  import {defineComponent, onMounted, reactive, ref, } from "vue";
  import {get_log} from "/@/api/biz/index";
  import { useI18n } from '/@/hooks/web/useI18n';
  export default defineComponent({
    setup() {
      onMounted(() => {
        getList();

      });
      const { t } = useI18n();
      const columns = [
        /*{
          title: t('routes.demo.inet.time'),
          with:'200',
          dataIndex: 'time',
        },*/
        {
          title: t('routes.demo.inet.operation_content'),
          align: "left",
          dataIndex: 'content',
        },

      ]
      const queryParams = reactive({
        cpn: 1,
        epc: 10,
      })

      const dataList = ref([])

      const loading = ref(false)

      const paginationOption = reactive({
        showSizeChanger: true,
        total: 0,
        current: 1,
        onChange: changePageInfo,
        onShowSizeChange: changePageInfo
      });
      function changePageInfo(page, pageSize) {
        queryParams.cpn = page
        queryParams.epc = pageSize
        getList()
      }


      function getList() {
        loading.value = true
        get_log(queryParams).then(res => {
          dataList.value = res.data.data.result.data
          paginationOption.current = queryParams.cpn
          paginationOption.total = res.data.data.result.data.data_count
          loading.value = false
        });
      }


      return {
        dataList,
        columns,
        paginationOption,
        labelCol: {span: 6},
        wrapperCol: {span: 18},
        t,
      }
    }

  })

</script>

<style lang="less" scoped>
::v-deep .ant-tabs-bar{
  margin: 0 !important;
}
.spane1{
  color: #0960bd;
  cursor: pointer;
}
.list1{
  padding: 20px 0;
}
.content1{
  padding: 15px 0;
  text-indent: 24px;
}
.hh1{
  line-height: 34px;
  text-align: center;
  font-weight: bold;
}
.dd1{
  line-height: 34px;
}
.dd2{
  line-height: 34px;
  text-indent: 24px;
}
.dd3{
  line-height: 34px;
  text-indent: 24px;
  float: right;
  margin: 20px 0;
}
.coll1{
  margin-bottom:50px;
}
.table1{
  border: 1px solid #fff;
}
</style>
